<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px" class="form">
      <el-form-item label="项目类型">
        <el-radio-group v-model="definition.type" >
          <el-radio :label="1">自主研发</el-radio>
          <el-radio :label="2">分社接洽</el-radio>
          <el-radio :label="3">ERP项目</el-radio>
          <el-radio :label="4">系统运维</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="项目初始节点">
        <el-row  style="margin-top: 5px">
          <el-col :span="2">
            <my_stepbox
              inputValue="初始项目"
              :id="index"
              @handleClose="abc">
            </my_stepbox>
          </el-col>
          <el-col :span="2">
            <my_stepbox
              inputValue="初始项目"
              :id="index"
              @handleClose="abc">
            </my_stepbox>
          </el-col>
          <el-col :span="2">
            <my_stepbox
              inputValue="初始项目"
              :id="index"
              @handleClose="abc">
            </my_stepbox>
          </el-col>
        </el-row>


      </el-form-item>

      <div class="core-form">
        <el-form ref="form" :model="form" label-width="120px">
          <el-form-item label="项目编号" >
            <el-form :inline="true" class="demo-form-inline">
              <el-form-item>
                <el-input v-model="definition.serial" placeholder="生成，不可编辑" :readonly='true'></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="search">获取编号</el-button>
              </el-form-item>
            </el-form>
          </el-form-item>
          <el-form-item label="项目名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="归属分社">
            <el-select v-model="definition.affiliation" >
              <el-option label="1" value="shanghai"/>
              <el-option label="2" value="beijing" />
            </el-select>
          </el-form-item>
        </el-form>

        <el-form ref="form" :model="form" label-width="120px">
          <el-form-item label="合同编号">
            <el-input v-model="definition.pact"></el-input>
          </el-form-item>
          <el-form-item label="合同编号">
            <el-radio-group v-model="definition.priority" >
              <el-radio :label="1">高</el-radio>
              <el-radio :label="2">中</el-radio>
              <el-radio :label="3">低</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="分社对接人">
            <el-select v-model="definition.moreSelect" multiple placeholder="请选择">
              <el-option
                v-for="item in definition.more"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <el-form-item label="项目概述">
        <el-input v-model="form.desc" type="textarea" maxlength="500" show-word-limit :autosize="{ minRows: 3, maxRows: 4}" resize="none"/>
      </el-form-item>

      <el-form-item label="项目公告">
        <el-input v-model="form.desc" type="textarea" maxlength="500" show-word-limit :autosize="{ minRows: 5}" resize="none"/>
      </el-form-item>

      <el-form-item label="项目资料">
        <div class="datum">
          <el-form :model="definition" ref="dynamicValidateForm" class="demo-dynamic">
            <el-form-item
              v-for="(domain, index) in definition.domains"
              :key="index"
              style="marginBottom:10px"
            >
              <div class="selectGroup">
                <el-select v-model="definition.contact" >
                  <el-option label="1" value="shanghai"/>
                  <el-option label="2" value="beijing" />
                </el-select>
                <el-select v-model="definition.contact" >
                  <el-option label="1" value="shanghai"/>
                  <el-option label="2" value="beijing" />
                </el-select>
                <el-select v-model="definition.contact" >
                  <el-option label="1" value="shanghai"/>
                  <el-option label="2" value="beijing" />
                </el-select>
                <el-input placeholder="请输入内容" class="datumInput"></el-input>
                <el-button @click.prevent="removeDomain(domain)" v-show="definition.deleteDelBtn" class="deleteDelBtn">删除</el-button>
              </div>
            </el-form-item>
          </el-form>
          <el-form-item>
            <el-button @click="addDomain">添加</el-button>
          </el-form-item>
        </div>
      </el-form-item>

      <el-form-item label="项目周期">
        <el-col :span="5" style="marginLeft:10px">
          <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%;" />
        </el-col>
        <el-col :span="1" class="line">~</el-col>
        <el-col :span="5">
          <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%;" />
        </el-col>
        <el-col :span="9">
          <el-form-item label="归属部门">
            <el-select v-model="definition.department" >
              <el-option label="1" value="shanghai"/>
              <el-option label="2" value="beijing" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item label="节点周期">
        <div class="nodeCycleList">
          <el-form :model="definition" ref="dynamicValidateForm">
            <el-form-item
              v-for="(i, index) in definition.nodeCycle"
              :key="index"
            >
              <div class="nodeCycleItem">
                <el-col :span="6">
                  <el-select v-model="definition.projectNodeSelect" style="marginRight:30px">
                    <el-option label="1" value="shanghai"/>
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date"  style="width: 100%;"/>
                </el-col>
                <el-col :span="1" class="line">~</el-col>
                <el-col :span="6">
                  <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date"  style="width: 100%;"/>
                </el-col>
              </div>
            </el-form-item>
          </el-form>
          <el-form-item>
            <el-button @click="addNodeCycle">+添加</el-button>
          </el-form-item>
        </div>
      </el-form-item>
      <el-form-item label="流转项目负责人">
        <el-input v-model="definition.responsible" placeholder="查找负责人" :readonly='true' class="searchResponsible"></el-input>
      </el-form-item>

      <el-form-item>
        <div class="buttonBox">
          <el-button type="primary" @click="onSubmit">Cre22222ate</el-button>
          <el-button @click="onCancel">Cancel</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import my_stepbox from '@/components/StepBox/index'
  export default {
    components:{
      my_stepbox
    },
    data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        activeIndex:0,
        definition:{
          type:1,
          serial:'',
          pact:'',
          priority:1,
          affiliation:1,
          contact:1,
          moreSelect:'请选择',
          deleteDelBtn:true,
          responsible:'',
          more:[{
            value: '选项1',
            label: 'aaaaa'
          }, {
            value: '选项2',
            label: 'bbbbb'
          },],
          domains: [{
            value:''
          }],
          nodeCycle:[{
            value:''
          }],
          department:[
            {
              name:'请选择'
            }
          ],
          projectNodeSelect:[
            {
              name:'请选择'
            }
          ],
          projectNode:['虚拟项目','正式立项','开发完结','正式交付','项目完结']
        }
      }
    },
    methods: {
      // 回调
      abc(val) {
        // console.log(val);
      },
      changeIndex(index){
        this.activeIndex = index
        // console.log(index)
      },
      onSubmit() {
        this.$message('submit!111111')
        // window.console.log(this.definition)
        this.$router.push("/createProject/projectEnd")
      },
      onCancel() {
        this.$message({
          message: 'cancel!',
          type: 'warning'
        })
      },
      search() {

      },
      removeDomain(item) {
        if(this.definition.domains.length > 1){
          this.deleteDelBtn = true
          var index = this.definition.domains.indexOf(item)
          if (index !== -1) {
            this.definition.domains.splice(index, 1)
          }
        }else{
          this.deleteDelBtn = false
        }
      },
      addDomain() {
        this.definition.domains.push({

        });
      },
      addNodeCycle() {
        this.definition.nodeCycle.push({
          value:''
        });
      },


    }
  }
</script>

<style lang="scss" scoped>
  .app-container{
    background: #f2f2f2;
  }
  .form{

    padding: 5% 20% 5% 0;
    background: #ffffff;
  }
  .selectNode{
    display: flex;
    .nodeItem{
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      .itemText{
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin-right: 15px;
        padding: 0 5px 0 5px;
        border: 1px solid black;
        border-radius: 1px;
        background: #ffffff;
      }
      .itemText:before{
        content:"";
        border:14px solid black;
        border-top-color:transparent;
        border-right-color:transparent;
        border-bottom-color:transparent;
        width:0px;
        height:0px;
        position:absolute;
        right: -29px;
      }
      .itemText:after{
        content:"";
        border:14px solid #ffffff;
        border-top-color:transparent;
        border-right-color:transparent;
        border-bottom-color:transparent;
        width:0px;
        height:0px;
        position:absolute;
        right: -28px;
      }
      .itemText_active{
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin-right: 15px;
        padding: 0 5px 0 5px;
        border: 1px solid black;
        border-radius: 1px;
        background: #d7d7d7;
      }
      .itemText_active:before{
        content:"";
        border:14px solid black;
        border-top-color:transparent;
        border-right-color:transparent;
        border-bottom-color:transparent;
        width:0px;
        height:0px;
        position:absolute;
        right: -29px;
      }
      .itemText_active:after{
        content:"";
        border:14px solid #d7d7d7;
        border-top-color:transparent;
        border-right-color:transparent;
        border-bottom-color:transparent;
        width:0px;
        height:0px;
        position:absolute;
        right: -28px;
      }
    }
  }
  .line{
    text-align: center;
  }
  .core-form{
    // width: 80%;
    display: flex;
    // justify-content: space-between;
  }
  .datum{
    width: 90%;
    display: flex;
    justify-content: space-between;
    margin: 10px;
    min-height: 100px;
  }
  .selectGroup{
    display: flex;
    justify-content: space-between;
  }
  .selectGroup .el-select{
    margin-right: 10px;
  }
  .datumInput{
    width: 30%;
  }
  .deleteDelBtn{
    margin: 0px 10px;
  }
  .nodeCycleList{
    display: flex;
  }
  .nodeCycleItem{
    margin-top: 5px;
  }
  .searchResponsible{
    width: 30%;
  }
  .buttonBox{
    width: 100%;
    display: flex;
    justify-content: center;
  }
</style>

